/**
author: sailing
date: 2016/12/24
**/

<style lang='less'>
.infoContainer{
  background: #fff;
  width:100%;
  height:500px;
  position:relative;
  .portAll{
    display:flex;
    border:1px solid #ccc;
    margin-left:30px;
    border-radius: 19px;
    margin-top:20px;
    max-width:500px;
    max-height:300px;
    .ulStyle {
      .liStyle{
        display:inline-block;
        margin-right:10px;
        padding:10px;
        line-height:30px;
       .cir{
          width: 15px;
          height:15px;
          border-radius:10px;
          display:inline-block;
        }
        .cir:hover{
          cursor: pointer;
          background:#eee;
        }
       .use {
          background: yellow; 
        }
      .noUse {
        background: green;
      }
      .useError {
        background: red;
      }
      }
    }
  }
}
</style>

<template>
<div class='infoContainer'>
  <div class='portAll'>
    <ul class='ulStyle'>
      <li class='liStyle' v-for="item in port">
        <label>{{item.num}}</label>
        <span @mouseout='mouseout(item)' @mouseover='mouseover($event, item)' class='cir' v-bind:class="{ 'use': item.state === 0, 'noUse': item.state === 1, 'useError': item.state === 2 }"></span>
      </li>
    </ul>
  </div>
</div>
</template>

<script>
import eventBus from '../../eventBus'
import getAllPoint from '../../server/getAllPoint'
export default {
  data () {
    return {
      port: [{
        state: 1,
        num: 1
      }, {
        state: 0,
        num: 2
      }, {
        state: 0,
        num: 3
      }, {
        state: 0,
        num: 4
      }, {
        state: 0,
        num: 5
      }, {
        state: 0,
        num: 6
      }, {
        state: 0,
        num: 7
      }]
    }
  },
  methods: {
    classObject () {
      return 'noUse'
    },
    mouseover (event, item) {
      eventBus.bus.$emit('showPointInformation', {item: item, e: event})
    },
    mouseout (item) {
      eventBus.bus.$emit('hideInformation', item)
    }
  },
  mounted () {
    const that = this
    eventBus.bus.$on('showAllPort', function (data) {
      getAllPoint.start(data.id)
    })
    eventBus.bus.$on('showPointList', function (data) {
      that.port = data
    })
  }
}
</script>